<template>
    <Teleport :to='props.to'>
        <!-- <van-nav-bar v-bind="props" v-bind="attrs"></van-nav-bar> -->
        <van-nav-bar v-bind="{...props,...attrs}" @click-left="$emit('click-left')" @click-right="$emit('click-right')" >
            <!-- 以下slot用于接收 app-header组件中 对于插槽名称传入的内容 -->
            <!-- <slot name="title"></slot>
            <slot name="left"></slot>
            <slot name="right"></slot> -->

            <!-- 以下-->
            <!-- <template v-slot:title>
                11111
            </template>

            <template v-slot:left>
                2222
            </template>

            <template v-slot:right>
                3333
            </template> -->

            <!-- 对应插槽名称 将AppHeader组件接收的内容 传入给navBar -->
            <template v-if="slots.title" v-slot:title>
                <slot name="title"></slot>   <!-- AppHeader接收的插槽内容-->
            </template>

            <template v-if="slots.left" v-slot:left>
                <slot name="left"></slot>
            </template>

            <template v-if="slots.right" v-slot:right>
                <slot name="right"></slot>
            </template>
        </van-nav-bar>
    </Teleport>
</template>

<script setup>
    // 新组件 AppHeader => teleport + NavBar的组合版

    // AppHeader => 此组件接收的属性,基本上作用于 teleport + NavBar
    import { NavBar } from "vant";
    import { useAttrs,useSlots } from "vue";

    // console.log(NavBar.props);
    let props = defineProps({ // 组件中接收的属性
        to:{
            require:true,
            type:String,
        },
        ...NavBar.props,
        clickLeft:{
            type:Function,
        },
        clickRight:{
            type:Function,
        }
    })

    defineEmits("click-left","click-right")

    let attrs = useAttrs(); // 接收透传的属性
    let slots = useSlots(); // 接收组件的插槽内容 => 对于插槽名称接收

    console.log("props",props);
    console.log("attrs",attrs);
    console.log("slots",slots);


</script>

<style lang="scss" scoped>

</style>